<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <table border="1">
        <tr>
            <th width="15%">id</th>
            <th width="10%">name</th>
            <th width="10%">enable <input type="checkbox" v-model="enableAll" @click="funEnableAll"/></th>
            <th width="10%">clickable <input type="checkbox" v-model="enClickableAll" @click="funEnClickableAll"/></th>
        </tr>

        <tr v-for="i in items">
            <td style="text-align:left;">R.id.{{i.resId}}</td>
            <td style="text-align:left;">{{i.defineName}}</td>
            <td style="text-align:left;">
                <input type="checkbox" :value="i.resId" v-model="enable"/></td>
            <td style="text-align:left;">
                <input type="checkbox" :value="i.resId" v-model="clickable"/></td>
        </tr>

    </table>
    <button type="button" @click="generate">Generate</button>
</div>
</body>

<script src="https://unpkg.com/vue"></script>
<!--<script src="vue.js"></script>-->
<!--java代码只加载了本文件，未加载vue.js文件-->
<script>
    function widget(id,enableWidget,name,enableClickEvent){
        this.id = id;
        this.enableWidget = enableWidget;
        this.name = name;
        this.enableClickEvent = enableClickEvent;
    }

    var widgets = new Array()

    #for(x : beanWidgets)
    var widget#(for.index)=new widget('#(x.resId)',#(x.enable),'#(x.defineName)',#(x.clickable));
    widgets.push(widget#(for.index))
    #end

    new Vue({
        el: "#app",
        data: () => ({

            items: [
                #for(x : beanWidgets)
                    {
                        resId: "#(x.resId)",
                        defineName: "#(x.defineName)",
                        enable: "#(x.enable)",
                        clickable: "#(x.clickable)"
                    }#if(for.index==for.size-1)#else,#end
                #end
            ],
            enable: [],
            clickable: [],
            enableAll: false,
            enClickableAll: false
        }),
        methods: {
            funEnableAll() {
                this.enable = [];
                if (this.enableAll) {
                    for (let i in this.items) {
                        this.enable.push(this.items[i].resId);
                    }
                }
            },
            funEnClickableAll() {
                this.clickable = [];
                if (this.enClickableAll) {
                    for (let i in this.items) {
                        this.enable.push(this.items[i].clickable);
                    }
                }
            },
            generate(){
               for (var i = 0; i < widgets.length; i++) {
                   widgets[i].enableWidget=this.enable[i];
                   widgets[i].enClickableAll=this.clickable[i];
               }
               console.log(JSON.stringify( widgets ))
               // alert(JSON.stringify( widgets ))
            }
        }
    });
</script>

</html>

